<template>
  <g-table-page
    :store-model-name="storeModelName"
    add-btn-link="/admin/researchOrg/add"
    add-btn-link-text="添加后台菜单"
    :selection="false"
    :table-operation="tableOperation"
  >
    <!-- 根据tableHeadList slotName字端 动态插入 插槽 -->
    <template v-for="item in tableHeadListSlotName" :key="item.slotName" #[item.slotName]="{ row }">
      <div v-if="row">
        <span v-if="item.prop == 'researchDatastatus'">
          {{ row[item.prop] == 1 ? '有效' : '无效' }}
        </span>
      </div>
    </template>
  </g-table-page>

  <!-- <div class="text-sm text-red-400 mt-4">
  </div> -->
</template>

<script setup lang="ts">
import { computed, toRefs, ref } from 'vue'
import type { TableHeadList } from '@/types/storeModule'
import router from '@/router'
import store from '@/store'
import { updateBackMenuApi } from '@/api/system'
import { ElMessage } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'

const storeModelName = 'researchOrgModule'
const tableOperation = {
  width: 100,
  fixed: 'right',
  buttonGroups: [
    ({ row }) => {
      return {
        name: '编辑',
        isShow: true,
        click: ({ row }) => {
          router.push({
            path: '/admin/researchOrg/edit',
            query: { id: row.researchOrgId }
          })
        }
      }
    },
    ({ row }) => {
      return {
        name: '删除',
        type: 'danger',
        isShow: true,
        click: ({ row }) => {
            // loading(true)
            updateBackMenuApi({researchOrgId: row.researchOrgId, status: 0 }).then((res) => {
              if(res * 1 === 200){
                ElMessage.success('删除成功')
                setTimeout(() => {
                  // loading(false)
                  router.go(0);
                }, 100)
              }
            })
        }
      }
    }
  ]
}

const tableHeadListSlotName = computed(() => {
  const tableHeadList = store.state[storeModelName].tableHeadList
  return tableHeadList.filter((item: TableHeadList) => item.slotName)
})
</script>
